{% extends base %}

{% block head %}
    <style type="text/css">
        .common-color-div div, #other-color-div div {
            float: left;
            width: 25%;
            padding: 5px;
            min-width: 150px;
        }
    </style>
{% end %}

{% block body %}
    <div class="common-color-div card">
        <H1 class="heading">HTML4.0标准中浏览器支持的16种颜色</H1>
        <br/>
        <div>#00FFFF aqua </div>
        <div>#000000 black </div>
        <div>#0000FF blue </div>
        <div>#FF00FF fuchsia </div>
        <br/>
        <div>#808080 gray </div>
        <div>#008000 green </div>
        <div>#00FF00 lime </div>
        <div>#800000 maroon </div>
        <br/>
        <div>#000080 navy </div>
        <div>#808000 olive </div>
        <div>#800080 purple </div>
        <div>#FF0000 red </div>
        <br/>
        <div>#C0C0C0 silver </div>
        <div>#008080 teal </div>
        <div>#FFFFFF white </div>
        <div>#FFFF00 yellow </div>
    </div>

    <div class="common-color-div card">
        <H1 class="heading">经典配色</H1>
        <br/>
        <div>#00C1DE 阿里云蓝</div>
        <div>#0099CC 安卓蓝1</div>
        <div>#039BE5 安卓蓝2</div>
        <div>#568900 草绿色</div>
        <div>#fff8e8 背景色</div>
    </div>
    
    <div id="other-color-div" class="col-md-12 card">
        <H1 class="heading">其他颜色</H1>
        <br/>
        <textarea id="other" style="display:none;">
        #FF0000 红色;
        #00FF00 绿色;
        #008000 绿色;
        #0000FF 绿色;
        #0074bd 蓝色;
        #0978DD;
        #CCCCCC 灰色;
        #BBBBBB;
        #AAAAAA;
        #FF8040;
        #FF8000;</textarea>
    </div>
<script>

function createSpan(color) {
    var span = document.createElement('span');
    // span.innerHTML = '&nbsp;';
    span.style.backgroundColor=color;
    span.style.marginLeft = '10px';
    span.style.marginRight = "10px";
    span.style.paddingLeft = '40px';
    return span;
}


function process() {
    // pElements = document.getElementsByTagName('div');

    var pElements = $(".common-color-div div");
    for (var i = 0; i < pElements.length; i++) {
        var item = pElements[i];
        var content = item.innerHTML;
        // console.log(item.innerHTML);
        item.innerHTML = "";
        var startIdx = content.indexOf('#');
        var color = content.substring(0, 7);
        var span = createSpan(color);
        item.appendChild(span);
        item.innerHTML += content;
    }
    
    var other = document.getElementById("other").innerHTML;
    var otherList = other.split(";");
    var count = 0;
    var parent = document.getElementById("other-color-div");
    for (var i = 0; i < otherList.length; i++) {
        var item = otherList[i];
        item = item.trim();
        if (item == "") continue;
        var color = item.substring(0, 7);
        var div = document.createElement('div');
        var span = createSpan(color);
        div.appendChild(span)
        div.innerHTML += item;
        parent.appendChild(div);
        if ((count+1) % 4 == 0) {
            // var br = document.createElement('br');
            // parent.appendChild(br);
        }
        count++;
    }
}

document.onreadystatechange = function () {
    // console.log(document.readyState);
    if (document.readyState == "complete") {
        var other = document.getElementById('other');
        var colors = ["00", "55", "88", "CC", "FF"];
        var text = "";

        arrForEach(colors, function (i) {
            arrForEach(colors, function (j) {
                arrForEach(colors, function (k) {
                    text += "#" + i + j + k + ";";
                })
            })
        })
        other.innerHTML=text;
        process();
    }
}
</script>

{% end %}